<template>
  <view :data-theme="globPrimary">
    <u-navbar title="学友圈" :title-bold="true" :title-color="'#303133'" :custom-back="onBack">
    </u-navbar>

    <view class="circle-tabs" :style="{ top: globNavbarHeight + globStatusBarHeight + 'px' }">
      <view
        v-for="item in tabsList"
        :key="item.value"
        :class="[{ active: item.value == tabsCurrentValue }]"
        class="circle-tabs__item"
        @click="handleTabsChange(item.value)"
      >
        {{ item.title }}
        <text class="line"></text>
      </view>
    </view>

    <div class="circle-tabs__placeholder" :style="[{ height: tabsPlaceholder }]"></div>

    <view class="circle-body">
      <edu-mescroll-body
        ref="mescrollRef"
        :height="mescrollHeight"
        @init="mescrollInit"
        @down="downCallback"
        @up="getCircleList"
      >
        <view v-for="page in tabsList" :key="page.value">
          <dymic
            v-if="tabsCurrentValue == page.value"
            :dymiclist="page.list"
            :showFollow="page.value != 3"
            @thumbUp="onCircleLike"
            @follow="onFollowUser"
            @delFollow="unFollowUser"
            @toLink="toUserInfo"
            @toDetail="toCircleDetails"
            @zhuanfa="toForwardCircle"
          >
          </dymic>
        </view>
      </edu-mescroll-body>
    </view>

    <!-- 发布按钮 -->
    <view
      class="circle-publish-btn u-flex"
      @click="toPublishCircle"
      :style="{
        background: navbarBtnBgColor,
      }"
    >
      <u-icon name="plus" color="#ffffff" size="38"></u-icon>
    </view>

    <edu-user-coupon></edu-user-coupon>
  </view>
</template>

<script>
import courseImage from '@/components/common/courseImage.vue'
import dymic from './components/dymic.vue'
import { mapGetters } from 'vuex'
import { lighten } from '@/utils'
export default {
  components: {
    courseImage,
    dymic,
  },
  data() {
    return {
      tabsList: [
        { title: '推荐', value: 1, list: [], num: 1, y: 0, curPageLen: 0, hasNext: true },
        { title: '广场', value: 2, list: [], num: 1, y: 0, curPageLen: 0, hasNext: true },
        { title: '关注', value: 3, list: [], num: 1, y: 0, curPageLen: 0, hasNext: true },
      ],
      tabsCurrentValue: 2,
      circlelist: [],
    }
  },
  // 监听页面返回
  onBackPress(options) {
    if (options.from === 'navigateBack') {
      return false
    }
    this.onBack()
    return true
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    mescrollHeight() {
      const windowHeight = this.$u.sys().windowHeight
      let height = windowHeight - this.globNavbarHeight - this.globStatusBarHeight - uni.upx2px(130)
      return `${height}px`
    },
    navbarBtnBgColor() {
      let style = `linear-gradient(31deg, ${lighten(this.globPrimaryColor, 28)} 0%, ${
        this.globPrimaryColor
      } 100%)`
      return style
    },
    tabsPlaceholder() {
      let height = uni.upx2px(130)
      return `${height}px`
    },
  },
  methods: {
    // 圈子列表数据
    async getCircleList(page) {
      let data = null
      await this.$edu.api
        .getCircleList({
          type: this.tabsCurrentValue,
          page: page.num,
          count: page.size,
        })
        .then((res) => {
          data = res.data.data
        })
        .catch(() => {
          this.mescroll.resetUpScroll(false)
        })
      // 当前tab数据
      this.tabsList.forEach((item) => {
        if (item.value == this.tabsCurrentValue) {
          if (page.num == 1) item.list = [] //如果是第一页需手动制空列表
          item.list = item.list.concat(data) //追加新数据
          item.num = page.num // 页码
          item.curPageLen = data.length // 当前页长
          item.hasNext = this.mescroll.optUp.hasNext // 是否还有下一页
          this.mescroll.endSuccess(data.length)
        }
      })
    },
    // 切换头部菜单
    handleTabsChange(val) {
      if (this.tabsCurrentValue == val) return
      let login = false
      // 关注必须要登录
      if (val == 3) {
        this.$edu.judgeLogin(() => {
          login = true
        })
      } else {
        login = true
      }
      if (login) {
        this.tabsCurrentValue = val
        this.tabsList.forEach((item) => {
          if (item.value == this.tabsCurrentValue) {
            // 记录切换前滚动条的位置
            item.y = this.mescroll.getScrollTop()
            if (item.list.length == 0) {
              // 没有初始化,则初始化
              this.mescroll.resetUpScroll()
            } else {
              // 初始化过,则恢复之前的列表数据
              this.mescroll.setPageNum(item.num + 1) // 恢复当前页码
              this.mescroll.endSuccess(item.curPageLen, item.hasNext) // 恢复是否有下一页或显示空布局
              this.$nextTick(() => {
                this.mescroll.scrollTo(item.y, 0) // 恢复滚动条的位置
              })
            }
          }
        })
      }
    },
    // 关注用户
    onFollowUser(val) {
      this.$edu.api
        .getUserFollow({
          user_id: val,
        })
        .then((res) => {
          this.$u.toast(res.msg)
          this.tabsList.forEach((page) => {
            if (page.value == this.tabsCurrentValue) {
              page.list.forEach((item) => {
                if (val == item.user_id) item.followed = 1
              })
            }
          })
        })
    },
    // 取消关注用户
    unFollowUser(val) {
      this.$edu.api
        .getUserDelFollow({
          user_id: val,
        })
        .then((res) => {
          this.$u.toast(res.msg)
          this.tabsList.forEach((page) => {
            if (page.value == this.tabsCurrentValue) {
              page.list.forEach((item) => {
                if (val == item.user_id) item.followed = 0
              })
            }
          })
        })
    },
    // 圈子点赞
    onCircleLike(data) {
      this.$edu.api
        .postCircleLike({
          type: 1,
          obj_id: data.id,
          status: data.type,
        })
        .then((res) => {
          this.$u.toast(res.msg)
          this.tabsList.forEach((page) => {
            if (page.value == this.tabsCurrentValue) {
              page.list.forEach((item) => {
                if (data.id == item.id) {
                  if (data.type == 1) {
                    item.is_like = 1
                    item.like_num++
                  } else {
                    item.is_like = 0
                    item.like_num--
                  }
                }
              })
            }
          })
        })
        .catch((err) => {
          this.$u.toast(err.msg)
        })
    },
    // 跳转到用户详情
    toUserInfo(id) {
      this.$edu.route('/pageFound/user/index', {
        id: id,
      })
    },
    // 跳转到圈子详情
    toCircleDetails(data) {
      this.$u.route('/pageFound/circle/friendDetail', {
        circle_id: data,
      })
    },
    // 跳转到发布圈子动态
    toPublishCircle() {
      this.$edu.judgeLogin(() => {
        let query = {
          group_id: this.group_id,
        }
        this.$u.route('/pageFound/circle/putCircle', query)
      })
    },
    // 跳转到转发圈子动态
    toForwardCircle(data) {
      this.$u.route('/pageFound/circle/forwardCircle', data)
    },
    // 返回上一页
    onBack() {
      let pages = getCurrentPages()
      let page = pages[pages.length - 2]
      if (this.$u.test.empty(page)) {
        this.$u.route({ type: 'switchTab', url: 'pages/index/index' })
      } else {
        this.$u.route({ type: 'back' })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.circle-tabs__placeholder {
  width: 100%;
}
.circle-tabs {
  background: #ffffff;
  padding: 0 30px;
  display: flex;
  align-items: center;
  height: 130rpx;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 98;
  &__item {
    font-size: 32rpx;
    line-height: 50rpx;
    margin-right: 56rpx;
    position: relative;
    .line {
      height: 4rpx;
      width: 32rpx;
      border-radius: 3rpx;
      position: absolute;
      left: 50%;
      bottom: -14rpx;
      margin-left: -16rpx;
      @include bg-color();
      opacity: 0;
      transition: all 0.2s;
    }
    &.active {
      font-size: 36rpx;
      font-weight: bold;
      .line {
        opacity: 1;
      }
    }
  }
}

.circle-body {
  background: #ffffff;
  padding: 40rpx 30rpx 0;
}

.circle-publish-btn {
  position: fixed;
  right: 30rpx;
  bottom: 130rpx;
  z-index: 999;
  width: 100rpx;
  height: 100rpx;
  box-shadow: 0px 0px 16px 0px rgba(81, 145, 255, 0.2);
  border-radius: 100%;
  justify-content: center;
}
</style>
